<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <style>
       .parent{
          width:100px;
          height:100px;
          margin: 0 auto;
          background-color:aquamarine;
          padding: 50px;
       }
   .parent .child{
          width:100px;
          height:100px;
          /* margin: 0 auto; */
          background-color:pink;
        }

    </style>
    <script>

        $(function(){ 
          // 基本事件
        //    $(".child").click(function(){
        //        console.log(0);
        //    })
        //    $(".child").mousemove(function(e){
        //        console.log(e.offsetX,e.offsetY);
        //    })

        //    $(".child").mouseover(function(){
        //        $(this).css("background-color","red");
        //    }).mouseout(function(){
        //        $(this).css("background-color","pink");
        //    })

        //    $(".child").hover(function(){
        //     $(this).css("background-color","red");
        //    },function(){
        //     $(this).css("background-color","pink");
        //    })
            //冒泡事件

            function   stopPropagation(e){
                e.stopPropagation();//阻止事件冒泡
                e.preventDefault(); //阻止默认行为 reset  submit a [href]
                return false;
            }

           $(".child").click(function(e){
               console.log
               (".child");
               return stopPropagation(e);// 调用返回函数
           })

           $(".parent").click(function(){
               console.log(".parent");
           })

           //
        })
    </script>
</head>
<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>
</body>
</html>